<template>
	<view class="order-page">
		<!-- 顶部工具栏 -->
		<view class="toolbar">
			<view class="stats">
				<u-tag :text="`共 ${total} 笔`" type="info" plain />
				<u-tag :text="`累计金额：${formatCurrency(totalAmount)}`" type="success" plain class="ml-2" />
			</view>
			<view class="actions">
				<u-search v-model="keyword" placeholder="搜 订单号/名称/收货人/来源/业务员" shape="round" :show-action="false" />
				<view class="sort-switch" @click="toggleSort">
					<u-icon :name="desc ? 'arrow-downward' : 'arrow-upward'" size="20" color="#1890ff"></u-icon>
					<text class="sort-text">{{ desc ? '新 → 旧' : '旧 → 新' }}</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="!total" class="empty-box">
			<u-empty mode="list" text="暂无订单记录"></u-empty>
		</view>

		<!-- 卡片列表 -->
		<scroll-view v-else scroll-y class="list-box">
			<view v-for="order in orderData" :key="order.orderId" class="order-card">
				<view class="card-header">
					<text class="order-title">订单 #{{ order.orderId }}</text>
					<u-tag :text="order.signDate ? '已签收' : '未签收'" :type="order.signDate ? 'success' : 'warning'" size="mini" />
				</view>

				<view class="info">
					<view class="row">
						<text class="label">商品：</text>
						{{ order.productSpec }}
					</view>
					<view class="row">
						<text class="label">数量：</text>
						{{ order.nums }}
					</view>
					<view class="row">
						<text class="label">金额：</text>
						{{ formatCurrency(order.orderPrice) }}
					</view>
					<view class="row">
						<text class="label">实付：</text>
						{{ formatCurrency(order.actualPrice) }}
					</view>
					<view class="row">
						<text class="label">下单：</text>
						{{ formatDate(order.orderTime) }}
					</view>
					<view class="row">
						<text class="label">签收：</text>
						{{ order.signDate ? formatDate(order.signDate) : '未签收' }}
					</view>
					<view class="row">
						<text class="label">业务员：</text>
						{{ order.salesman }}
					</view>
				</view>

				<view class="info mt-2">
					<view class="row">
						<text class="label">收货人：</text>
						{{ order.receiverName }}
					</view>
					<view class="row flex-between">
						<text class="label">电话：</text>
						<view class="phone">
							<text>{{ order.receiverPhone }}</text>
							<u-link :href="`tel:${order.receiverPhone}`" text="拨打" color="#1890ff"></u-link>
							<u-button size="mini" type="primary" plain @click="copy(order.receiverPhone)">复制</u-button>
						</view>
					</view>
					<view class="row">
						<text class="label">地址：</text>
						{{ order.receiverAddress }}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { listOrderCustomer } from '@/api/customers';

const orderData = ref([]);
const total = ref(0);
const totalAmount = ref(0);
const keyword = ref('');
const desc = ref(true);

function formatCurrency(n) {
	return `¥${Number(n || 0).toFixed(2)}`;
}
function formatDate(d) {
	if (!d) return '';
	const dt = new Date(d);
	if (isNaN(dt.getTime())) return d;
	return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')} ${String(dt.getHours()).padStart(2, '0')}:${String(
		dt.getMinutes()
	).padStart(2, '0')}`;
}
function copy(text) {
	uni.setClipboardData({ data: String(text ?? ''), success: () => uni.showToast({ title: '已复制' }) });
}
function toggleSort() {
	desc.value = !desc.value;
	orderData.value.reverse();
}

onLoad((options) => {
	const { customerId } = options;
	listOrderCustomer({ customerId }).then((res) => {
		if (res.code === 200) {
			orderData.value = res.rows || [];
			total.value = res.total || 0;
			totalAmount.value = res.rows?.reduce((sum, item) => sum + (item.actualPrice || 0), 0) || 0;
		}
	});
});
</script>

<style lang="scss" scoped>
.order-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #f8f9fa;
}
.toolbar {
	padding: 24rpx;
	background: #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
	.stats {
		display: flex;
		gap: 12rpx;
		margin-bottom: 16rpx;
	}
	.actions {
		display: flex;
		align-items: center;
		gap: 16rpx;
		.sort-switch {
			display: flex;
			align-items: center;
			gap: 6rpx;
			color: #1890ff;
			font-size: 26rpx;
		}
	}
}
.list-box {
	flex: 1;
	padding: 24rpx;
}
.order-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	margin-bottom: 24rpx;
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		.order-title {
			font-weight: 600;
			font-size: 30rpx;
		}
	}
	.info {
		font-size: 26rpx;
		color: #444;
		.row {
			margin-bottom: 12rpx;
			display: flex;
			align-items: flex-start;
			.label {
				color: #888;
				min-width: 120rpx;
			}
		}
		.phone {
			display: flex;
			gap: 12rpx;
		}
	}
	.mt-2 {
		margin-top: 20rpx;
	}
}
.empty-box {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
